<!-- 这个是注册页 -->
<template>
	<view>
		<!-- 这个是大组件 -->
		<view class="headdiv">
			<!-- 图标区 -->
			<view class="logoimagediv">
				<view class="icondiv">
					<image src="/static/logo.png" mode="scaleToFill" style="width: 80px; height: 80px;" />
				</view>
				<view class="testdiv">E-Go</view>
			</view>
			<!-- 主体区 -->
			<view class="bodydiv">
				<!-- 切换区域 -->
				<view class="tabssdiv">
					<u-tabs :list="list1" @click="myclick"></u-tabs>
				</view>
				<!-- 输入框区域 -->
				<view class="inputdiv" v-show="active === 0">
					<u--form labelPosition="left">
						<u-form-item borderBottom>
							<view class="mapdiv">
								<mypicker class="mypickerdiv" :candidates="peopleList" :isJSON="true" keyName="name"
									:placeholder="internationalization.register.ThAreaCode" v-model="regiPerson"
									@select="personSelect"></mypicker>
							</view>
							<u--input :placeholder="internationalization.login.phoneplaceholder"
								v-model="phoneobj.mobile"></u--input>
						</u-form-item>
						<u-form-item borderBottom>
							<br />
							<text style="margin-left: 20rpx;">{{internationalization.Setup.conumplaceholder}}</text>
							<u--input :placeholder="internationalization.register.codeplaceholder"
								v-model="phoneobj.code">
							</u--input>
							<u-button style="width: 180rpx;margin-right: 20px;" type="primary"
								:text="verificationCodeSent ? `${countdown}秒` : internationalization.register.sendCodeButton"
								:disabled="verificationCodeSent || !phoneobj.mobile" @click="sendVerificationCode">
							</u-button>
						</u-form-item>

						<u-form-item borderBottom>
							<u--input :placeholder="internationalization.register.pawplaceholder"
								:prefixIcon="passwordicon" v-model="phoneobj.password" password></u--input>
						</u-form-item>
					</u--form>
					<br />
				</view>
				<view class="inputdiv" v-show="active === 1">
					<u--form labelPosition="left">
						<u-form-item borderBottom>
							<u--input :placeholder="internationalization.login.emailplaceholder"
								:prefixIcon="mailboxicon" v-model="emailobj.email"></u--input>
						</u-form-item>
						<u-form-item borderBottom>
							<u--input :placeholder="internationalization.register.pawplaceholder"
								:prefixIcon="passwordicon" v-model="emailobj.password" password></u--input>
						</u-form-item>
					</u--form>
					<br />
					<van-radio-group style="display: flex; justify-content: center"
						@change="emailobj.radio = $event.detail" v-model="emailobj.radio" direction="horizontal">

					</van-radio-group>
				</view>
				<!-- 登录按钮区域 -->
				<view class="buttondiv">
					<van-button style="margin: auto" type="primary" round size="large" @click="MyRegister">
						{{ internationalization.register.btnval }}
					</van-button>


				</view>
				<!-- 注册，忘记密码区域 -->
				<view class="enddiv">
					<view style="display: flex">{{ internationalization.register.have }}？<view @click="Mygologin"
							style="margin-left: 10px; color: rgba(59, 167, 255, 1)">
							{{ internationalization.register.go }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getInfo
	} from "../../http/user/user"
	import {
		sendCode,
		verifyCode
	} from "../../http/sms/sms";
	import * as UserApi from "@/api/member/user";
	import * as AuthApi from "@/api/member/auth";
	import Mypicker from "../../wxcomponents/title/Mypicker.vue";
	export default {
		components: {
			mypicker: Mypicker,

		},
		data() {
			return {
				regiPerson: "", // 选择的Item
				peopleList: [{
						index: 0,
						name: "จีน+86",
					},
					{
						index: 1,
						name: "ไทย+66",
					}
				], // 登记人选择列表,
				verificationCodeSent: false,
				countdown: 0,
				// 这个是国际化的数据
				internationalization: {},
				active: 0,
				// 用户icon
				usericon: require("@/static/icon/1.png"),
				//   密码icon
				passwordicon: require("@/static/icon/password.png"),
				//   邮箱icon
				mailboxicon: require("@/static/icon/iconify-material-symbols-light_mail@2x.png"),
				//   验证码icon
				codeicon: require("@/static/icon/iconify-material-symbols_domain-verification@2x.png"),
				// 账号
				username: "",
				// 密码
				password: "",

				//   手机号注册的对象
				phoneobj: {
					// 手机号
					mobile: "",
					// 验证码
					code: null,
					// 密码
					password: "",
					// 这个是
					radio: "1",
				},
				areaCode: 66,
				//   这个是邮箱注册的对象
				emailobj: {
					// 邮箱
					email: "",
					// 密码
					password: "",
					// 这个是
					radio: "1",
				},
				// 这个是切换list
				list1: [],
			};
		},
		onShow: function() {
			this.getlanguagedata();
			console.log("Personalcenter Show");
		},
		onLoad() {
			this.getlanguagedata();
		},
		mounted() {
			this.getlanguagedata();
			// #ifdef  MP-WEIXIN
			this.nav();
			// #endif
		},
		methods: {
			// 登记人员选择
			personSelect(e) {
				if (e.index == 0) {
					this.areaCode = 86
				} else {
					this.areaCode = 66
				}
				// console.log("登记人员选择", e.index);
			},
			sendVerificationCode() {
				if (this.verificationCodeSent) return;
				this.verificationCodeSent = true;
				this.countdown = 60;
				const countdownInterval = setInterval(() => {
					this.countdown -= 1;
					if (this.countdown <= 0) {
						clearInterval(countdownInterval);
						this.verificationCodeSent = false;
					}
				}, 1000);
				// 调用发送验证码API
				let params = {
					mobile: this.phoneobj.mobile,
					scene: 1
				}
				if (this.areaCode === 66) {
					params.mobile = this.areaCode + this.phoneobj.mobile
					params.scene = 22
				}
				
				AuthApi.sendSmsCode(params).then(data => {
					
					this.$util.Tips({
						title: data.msg
					});

					// this.sendCode();
				})


				// sendCode(params).then((response) => {
				// 	// 处理响应
				// 	console.log("验证码发送成功", response);
				// }).catch((error) => {
				// 	console.error("验证码发送失败", error);
				// });
			},
			// verifyCodeBeforeRegister() {

			// 	//判断是否是手机注册
			// 	if (this.active === 1) {
			// 		console.log(this.active)
			// 		this.MyRegister(); // 调用原有注册逻辑
			// 		return;
			// 	}

			// 	if (!this.phoneobj.code) {
			// 		uni.showToast({
			// 			title: "请输入验证码",
			// 			icon: "none",
			// 			duration: 2000,
			// 		});
			// 		return;
			// 	}
			// 	let phone = this.code + this.phoneobj.phone
			// 	verifyCode(this.phoneobj.code, phone).then((response) => {
			// 		// 验证成功，继续注册逻辑
			// 		console.log("验证码验证成功", response);

			// 		if (response.code === 200) {
			// 			this.MyRegister(); // 调用原有注册逻辑
			// 		} else {
			// 			uni.showToast({
			// 				title: "验证码错误或已失效",
			// 				icon: "none",
			// 				duration: 2000,
			// 			});
			// 			console.error("验证码验证失败", error);
			// 		}
			// 	}).catch((error) => {
			// 		uni.showToast({
			// 			title: "验证码错误或已失效",
			// 			icon: "none",
			// 			duration: 2000,
			// 		});
			// 		console.error("验证码验证失败", error);
			// 	});
			// },



			// 注册
			MyRegister() {
				if (this.active === 0) {
					//中国手机号正则
					let chinaPhoneReg = /^((13[0-9])|(14[0-9])|(15[0-9])|(16[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/;
					//泰国手机号正则
					let thailandPhoneReg = /^[689]\d{8}$/;

					if (!this.phoneobj.mobile) {
						uni.showToast({
							title: `${this.internationalization.login.phoneplaceholder}`,
							icon: "none",
							duration: 2000,
						});
						return;
					}
					if (this.areaCode === 86 && !chinaPhoneReg.test(this.phoneobj.mobile)) {
						uni.showToast({
							title: '号码格式错误！',
							icon: "none",
							duration: 2000,
						});
						return;
					}
					if (!this.phoneobj.code) {
						uni.showToast({
							title: `${this.internationalization.register.codeplaceholder}`,
							icon: "none",
							duration: 2000,
						});
						return;
					}
					if (this.areaCode === 66 && !thailandPhoneReg.test(this.phoneobj.mobile)) {
						uni.showToast({
							title: '号码格式错误！',
							icon: "none",
							duration: 2000,
						});
						return;
					}
					if (this.areaCode === 66) {
						this.phoneobj.mobile = 66 + this.phoneobj.mobile
					}
					AuthApi.smsLogin({
						mobile: this.phoneobj.mobile,
						code: this.phoneobj.code,
						password: this.phoneobj.password,
					}).then(res => {
						// TODO 芋艿：refreshToken 机制
						if (res.code == 0) {
							uni.showToast({
								title: "注册成功",
								//将值设置为 success 或者直接不用写icon这个参数
								icon: "success",
								//显示持续时间为 2秒
							});
							//跳转前把用户信息存入vuex getInfo
							uni.setStorageSync("USER_INFO", data);
							uni.setStorageSync("UID", data.userId);
							uni.setStorageSync("token", res.data.accessToken);
							UserApi.getUserInfo().then((res) => { // 注意这里改为箭头函数
								// 现在这里的this指向外层的Vue实例
								uni.setStorageSync("USER_INFO", res.data);
								// this.$store.commit('user/SET_USER_INFO', res.data);
							});
							// getUserInfo().then((res) => { // 注意这里改为箭头函数
							// 	// 现在这里的this指向外层的Vue实例
							// 	this.$store.commit('user/SET_USER_INFO', res.data);
							// });
							uni.switchTab({
								url: "/pages/Home/Home"
							});
						} else {
							uni.showToast({
								title: res.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: "error",
								//显示持续时间为 2秒
								duration: 2000,
							});
						}
						// 	let data = res.data;
						// 	this.$store.commit("LOGIN", {
						// 		'token': res.data.accessToken
						// 	});
						// 	this.getUserInfo(data);
						// 	this.bindBrokerUser();
						// }).catch(res => {
						// 	this.$util.Tips({
						// 		title: res
						// 	});
						// });
						// this.$api.user
						// 	.postphoneregister({
						// 		code: this.phoneobj.code,
						// 		mobile: this.phoneobj.mobile,
						// 		password: this.phoneobj.password,
						// 	})
						// 	.then((res) => {
						// 		if (res.code == 0) {
						// 			uni.showToast({
						// 				title: "注册成功",
						// 				//将值设置为 success 或者直接不用写icon这个参数
						// 				icon: "success",
						// 				//显示持续时间为 2秒
						// 			});
						// 			//跳转前把用户信息存入vuex getInfo
						// 			uni.setStorageSync("token", res.data.accessToken);
						// 			getInfo().then((res) => { // 注意这里改为箭头函数
						// 				// 现在这里的this指向外层的Vue实例
						// 				this.$store.commit('user/SET_USER_INFO', res.data);
						// 			});
						// 			uni.switchTab({
						// 				url: "/pages/Home/Home"
						// 			});

						// 		} else {
						// 			uni.showToast({
						// 				title: res.msg,
						// 				//将值设置为 success 或者直接不用写icon这个参数
						// 				icon: "error",
						// 				//显示持续时间为 2秒
						// 				duration: 2000,
						// 			});
						// 		}
						// 	})
						// 	.catch((err) => {
						// 		uni.showToast({
						// 			title: "注册失败！",
						// 			//将值设置为 success 或者直接不用写icon这个参数
						// 			icon: "error",
						// 			//显示持续时间为 2秒
						// 			duration: 2000,
						// 		});
						// 		console.error(err);
					});
				} else if (this.active == 1) {
					// 邮箱正则表达式
					let email_reg =
						/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
					if (!this.emailobj.email || !email_reg.test(this.emailobj.email)) {
						uni.showToast({
							title: '请输入正确的邮箱号！',
							icon: "none",
							duration: 2000,
						});
						return;
					}
					if (!this.emailobj.password) {
						uni.showToast({
							title: `${this.internationalization.register.pawplaceholder}`,
							icon: "none",
							duration: 2000,
						});
						return;
					}
					AuthApi.postemailregister({
							email: this.emailobj.email,
							password: this.emailobj.password,
							code: '1231'
						})
						.then((res) => {
							console.log('邮箱', res, res.code == 0);
							if (res.code == 0) {
								console.log('邮箱--1', res.data);
								uni.showToast({
									title: res.data,
									//将值设置为 success 或者直接不用写icon这个参数
									// icon: none,

									//显示持续时间为 2秒                                                
									duration: 2000,
								});
								setTimeout(function() {
									uni.navigateTo({
										url: "/pages/Login/Login",
									});
								}, 3000);
							} else {
								uni.showToast({
									title: res.msg,
									//将值设置为 success 或者直接不用写icon这个参数
									icon: "error",
									//显示持续时间为 2秒
									duration: 2000,
								});
							}
						})
						.catch((err) => {
							console.log('邮箱--333', err);
							uni.showToast({
								title: "注册失败！",
								//将值设置为 success 或者直接不用写icon这个参数
								icon: "error",
								//显示持续时间为 2秒
								duration: 2000,
							});
							console.error(err);
						});
				}
			},
			getlanguagedata() {
				this.internationalization =
					this.$store.getters["internationalization/getinternationalization"];
				this.list1 = this.internationalization.register.title;
				this.peopleList[0].name = this.internationalization.register.ChAreaCode
				this.peopleList[1].name = this.internationalization.register.ThAreaCode
			},
			Myreg() {
				console.log(this.phoneobj.radio);
			},
			// 这个是切换的
			myclick(index) {
				this.active = index.index;
			},
			// 去登录
			Mygologin() {
				uni.navigateTo({
					url: "/pages/Login/Login",
				});
			},
		},
	};
</script>

<style lang="less" scoped>
	.headdiv {
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100vh;
		flex-direction: column;
		opacity: 1;
		display: flex;
		background: linear-gradient(94.07deg,
				rgba(235, 255, 236, 1) 0%,
				rgba(220, 247, 242, 1) 100%);

		.logoimagediv {
			width: 100%;
			height: 40%;
			margin-top: 30px;

			.icondiv {

				width: 100%;
				height: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.testdiv {
				width: 100%;
				height: 50%;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				/** 文本1 */
				font-size: 16px;
				font-weight: 700;
				letter-spacing: 0px;
				line-height: 17.72px;
				color: #07c160;
				text-align: left;
				vertical-align: top;
			}
		}

		// 主体区域
		.bodydiv {
			width: 100%;
			height: 60%;
			background-color: #ffffff;
			opacity: 1;
			border-radius: 10% 10% 0rpx 0rpx;
			overflow: hidden;

			.tabssdiv {
				width: 60%;
				height: 13%;
				margin-left: 20px;
				overflow: hidden;
			}

			// 输入框区域
			.inputdiv {
				width: 100%;
				height: 50%;
				margin-top: 5px;
			}

			// 登录按钮区域
			.buttondiv {
				width: 90%;
				height: 13%;
				margin-top: 60px;
				display: flex;
				margin: auto;
			}

			// 注册，忘记密码区域样式
			.enddiv {
				width: 50%;
				height: 13%;
				margin: 20rpx auto;
				font-family: "Times New Roman", "华文中宋", sans-serif;
				font-size: 12px;
				color: rgba(153, 153, 153, 1);
				display: flex;
				justify-content: space-around;
			}

			.mapdiv {
				// position: absolute;
				// top: 0;
				// left: 0;
				width: 120px;
				text-align: center;
				// height: 13%;
				/* 设置 mapdiv 的高度 */
				z-index: 1;
				/* 将 mapdiv 放置在上层 */
				display: flex;

				// 这个是子组件下拉框样式
				.mypickerdiv {
					width: 100%;
					// height: 100%;
					font-size: 12px;
					text-align: left;
					font-weight: 400px;
					display: flex;
				}
			}

			// 其他登录方式区域样式
			.otherdiv {
				width: 100%;
				height: 32%;

				// 标题区域
				.twotitlediv {
					width: 100%;
					height: 20%;
					margin: auto;
					display: flex;
					justify-content: space-around;
					align-items: center;
				}

				.twowaydiv {
					width: 100%;
					height: 20%;
					display: flex;
					justify-content: center;

					.one {
						width: 45px;
						height: 100%;
						margin-top: 10px;
						margin-left: 20px;
					}
				}
			}
		}
	}

	/deep/ .van-tab__text {
		font-size: 16px !important;
		font-weight: bold !important;
	}

	/deep/ .van-button--primary {
		border: none !important;
	}

	/deep/ .van-tabs__line {
		position: absolute;
		bottom: 10px;
		left: 0;
		z-index: 1;
		width: 40px;
		height: 3px;
		border-radius: 3px;

		background: linear-gradient(90deg,
				rgba(65, 240, 135, 1) 0%,
				rgba(47, 212, 184, 1) 100%);
	}

	/deep/ .van-button--primary {
		width: 360px;
		color: #fff;
		background: linear-gradient(90deg,
				rgba(65, 240, 135, 1) 0%,
				rgba(47, 212, 184, 1) 100%);
		border: 1px solid #07c160;
		font-size: 16px;
		font-weight: 700;
	}

	/deep/ .u-input--radius,
	.u-input--square {
		border-radius: 1px;
		width: 100% !important;
	}

	/deep/ .u-border {
		border: none;
		/* 移除默认边框 */
		// border-bottom: 2px solid rgba(217, 219, 218, 1); /* 下边框样式和颜色 */
	}

	/deep/.u-tabs__wrapper__nav__line {
		height: 3px;
		background: linear-gradient(90deg,
				rgba(65, 240, 135, 1) 0%,
				rgba(47, 212, 184, 1) 100%) !important;
		width: 25px !important;
		position: absolute;
		bottom: 2px;
		border-radius: 100px;
		transition-property: -webkit-transform;
		transition-property: transform;
		transition-property: transform, -webkit-transform;
		transition-duration: 300ms;
	}

	/deep/ .van-radio__icon--checked {
		background: linear-gradient(90deg,
				rgba(65, 240, 135, 1) 0%,
				rgba(47, 212, 184, 1) 100%) !important;
		border-color: linear-gradient(90deg,
				rgba(65, 240, 135, 1) 0%,
				rgba(47, 212, 184, 1) 100%) !important;
		color: #fff;
	}
</style>